import React , { Component } from 'react';
class Demo3 extends Component{
  constructor(){
    super()
    this.state={
      title:'受控组件',
      titles:'非受控组件'
    }
  }
  titleRef=React.createRef()
  controlled=(e)=>{
    console.log(e.target.value);
    this.setState({
      title:e.target.value
    })
    // console.log(this);
  }
  uncontrolled=(e)=>{
    console.log(e.target.value);
  }
  render(){
    return(
      <>
      <h2>受控组件和非受控组件</h2>
      <h2>用state来获取和设置输入元素值的组件，称之为受控组件</h2>
      <div>
        受控组件：{this.state.title}
        <input type="text" value={this.state.title}onChange={this.controlled} />
      </div>
      <h2>在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性</h2>
      <input type="text" ref={this.titleRef} onChange={this.uncontrolled} />
      </>
    )
  }
}
export default Demo3
